<template>
  <div>
    <div class="login_top">
      <div class="login_body">
        <div>
          <img src="../../assets/img/login_logo.png" alt style="width: 180px" />
          <span>欢迎登录</span>
        </div>
        <div class="kefu">
          <a href="https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes">
            <img src="../../assets/img/qq.png" alt />
          </a>
          <img src="../../assets/img/dh.png" alt />
        </div>
      </div>
    </div>
    <div class="login">
      <div class="f_bj">
        <img src="../../assets/img/login_bj.jpg" style="width:100%" alt />
      </div>
      <div class="login_body_new">
        <div class="login_body_top">
          <div :class="menuindex === 1?'redb':0" @click="menuindex = 1">验证码登录</div>
          <div :class="menuindex === 2?'redb':0" @click="menuindex = 2">密码登录</div>
          <div :class="menuindex === 3?'redb':0" @click="menuindex = 3">忘记密码</div>
        </div>
        <div v-if="menuindex === 1">
          <el-input prefix-icon="el-icon-phone-outline" v-model="params.phone" placeholder="请输入手机号"></el-input>
          <div style="display: flex;margin-top: 20px;">
            <div style="flex:3">
              <el-input
                prefix-icon="el-icon-chat-line-square"
                v-model="params.verification_code"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div style="flex:2;text-align: center;">
              <div @click="getPhoneCode(1)" v-show="show" style="line-height: 40px;">
                <input
                  id="J-btnGetCode"
                  class="getcodeBtn"
                  name="codeinput"
                  type="button"
                  sdata="60"
                  value="获取验证码"
                />
              </div>
              <div v-show="!show" style="margin-left: 20px;">{{count}} s</div>
            </div>
          </div>
          <div>
            <button class="log_sbt2" @click="loginHandle(1)">登录</button>
          </div>
        </div>
        <div v-if="menuindex === 2">
          <el-input prefix-icon="el-icon-phone-outline" v-model="params.phone" placeholder="账号/已绑定手机号"></el-input>
          <div style="margin-top: 20px;">
            <el-input prefix-icon="el-icon-unlock"  placeholder="请输入密码" v-model="params.password" show-password></el-input>
          </div>
          <div>
            <button class="log_sbt2" @click="loginHandle(2)">登录</button>
          </div>
        </div>
        <div v-if="menuindex === 3">
          <el-input prefix-icon="el-icon-phone-outline" v-model="newparams.phone" placeholder="请输入手机号"></el-input>
          <div style="margin-top: 5%;">
            <el-input prefix-icon="el-icon-unlock"  placeholder="请输入新密码" v-model="newparams.password" show-password></el-input>
          </div>
          <div style="display: flex;margin-top: 5%;">
            <div style="flex:3">
              <el-input
                   prefix-icon="el-icon-chat-line-square"
                v-model="newparams.verification_code"
                placeholder="请输入获取到的验证码"
              ></el-input>
            </div>
            <div class="yzmCode" style="flex:2;text-align: center">
              <div @click="getPhoneCode(2)" v-show="show" >
                <input
                  id="J-btnGetCode"
                  class="getcodeBtn"
                  name="codeinput"
                  type="button"
                  sdata="60"
                  value="获取验证码"
                />
              </div>
              <div v-show="!show" style="margin-left: 20px;">{{count}} s</div>
            </div>
          </div>
          <div>
            <button class="log_sbt2" @click="xgPassword">修改密码</button>
          </div>
        </div>
        <div class="login_body_bottom">
          <div>
            <span  tyle="color:#a1a1a1">还没有账号?</span>
            <router-link to="/register" style="color:#ff0000">立即注册</router-link>
          </div>
                    <div class="login_tips_QQ">
                  <a href="https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes" target="_blank">
                    <span class="qqTipsStyle" style="color:#a1a1a1">
                      <svg-icon icon-class="QQkefu" class-name="QQkefu" />客服QQ
                    </span>
                  </a>
                  <div class="inlineBlock">
                    <div class="phone_tip tipIcon"></div>
                    <span>
                      <svg-icon icon-class="dianhua" class-name="dianhua" />客服电话： 400-618-0107
                    </span>
                  </div>
                </div>
        </div>
      </div>
      <div class="bd1 clearfix">
        <!-- <div class="fr m-login" style="position: absolute;
    right: -144px;
        top: -13px;">-->
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="验证码登录" name="first">
                 <div class="new-tab-item">
              <div class="place14 mt60">
                <div class="mt10 mb20 relative">
                  <input type="text" v-model="params.phone" placeholder="账号/已绑定手机号" class="txt ipt-txt plr10 h36 clearinput">
                  <svg-icon icon-class="user" class-name="user" />
                  <i class="inputrightico closeico" style="display: inline;">
                    <img src="../../assets/img/close.png" class="vmid" @click="empty">
                  </i>
                </div>
                <div id="varycode1" style="display:none"></div>
                <div id="varycode2" style="display:none;margin-top:-15px" class="">
                  <div id="user_vcode" class="clli">
                    <div class="mb20">
                      &nbsp;
                      <span id="wait" class="show" style="margin:5px 0 0 12px;color:#4448f8">正在加载验证码......</span>
                      <div class="box-captcha" id="float-captcha" style="margin-left:12px;"></div>
                    </div>
                  </div>
                </div>
                <div id="smsCodes" style="position:relative;display: flex;align-items: center">
                  <div class="mt10 mb20 relative">
                    <svg-icon icon-class="txtCode" class-name="suo" />
                    <input v-model="params.verification_code" placeholder="请输入您收到的验证码" type="text" id="txtCodea" class="txt ipt-txt plr10 h36">
                    <i class="inputrightico closeico"><img src="/images/show.png" class="vmid"></i>
                  </div>
                  <div @click="getPhoneCode(1)" v-show="show">
                    <input id="J-btnGetCode" class="getcodeBtn" name="codeinput" type="button" sdata="60" value="获取验证码">
                  </div>
                  <div v-show="!show" style="margin-left: 20px;">
                   {{count}} s
                  </div>
                </div>
                <div class="mt10 mb20 relative wordHui tips_margin" id="autoLogina">
                  <input type="checkbox" id="chkSaveme" checked="" class="checkbox fl">
                  <label for="chkSaveme" class="fl">7天内免登录</label>
                  <input type="checkbox" id="rememberPass" checked="" class="checkbox fl" style="margin:0 4px 0 15px">
                  <label for="chkSaveme" class="fl">记住密码</label>
                  <a href="forget1.aspx" class="toblue fr wordHui" id="forgetPass">忘记密码?</a>
                </div>
                <div>
                  <button class="log_sbt2 bg4448f8 mr20 login_btn" @click="loginHandle(1)">登录</button>
                </div>
                <div>
                  <a class="log_sbt2 bg4448f8 mr20 login_btn" id="registe_submit" style="display:none" href="javascript:;">登录</a>
                </div>

                <div class="mt10 mb20 clearfix u-loginRelative tips_margin">
                  <span class="wordHui">还没有账号?</span>
                  <router-link to="/register" class="wordLan">立即注册</router-link>
                </div>
                <div class="login_tips">
                  <a href="https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes" target="_blank">
                    <span class="qqTipsStyle">
                      <svg-icon icon-class="QQkefu" class-name="QQkefu" />客服QQ
                    </span>
                  </a>
                  <div class="inlineBlock">
                    <div class="phone_tip tipIcon"></div>
                    <span>
                      <svg-icon icon-class="dianhua" class-name="dianhua" />客服电话： 400-618-0107
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="账号登录" name="second">
            <div class="new-tab-item">
              <div class="place14 mt60">
                <div class="mt10 mb20 relative">
                  <input type="text" v-model="params.phone" placeholder="账号/已绑定手机号" class="txt ipt-txt plr10 h36 clearinput">
                  <svg-icon icon-class="user" class-name="user" />
                  <i class="inputrightico closeico" style="display: inline;">
                    <img src="../../assets/img/close.png" class="vmid" @click="empty">
                  </i>
                </div>
                <div id="upwd" style="display:inline">
                  <div class="mt10 mb20 relative tips_margin">
                    <input type="password" id="txtPwds" v-model="params.password" placeholder="请输入密码" class="txt ipt-txt plr10 h36">
                     <svg-icon icon-class="suo" class-name="suo" />
                    <i class="inputrightico showico">
                      <img src="../../assets/img/show.png" class="vmid">
                    </i>
                  </div>
                </div>
                <div class="mt10 mb20 relative wordHui tips_margin" id="autoLoginb">
                  <input type="checkbox" id="chkSaveme" checked="" class="checkbox fl">
                  <label for="chkSaveme" class="fl">7天内免登录</label>
                  <input type="checkbox" id="rememberPassa" checked="" class="checkbox fl" style="margin:0 4px 0 15px">
                  <label for="chkSaveme" class="fl">记住密码</label>
                  <a href="forget1.aspx" class="toblue fr wordHui" id="forgetPassa">忘记密码?</a>
                </div>
                <div>
                  <button class="log_sbt2 bg4448f8 mr20 login_btn" @click="loginHandle(2)">登录</button>
                </div>
                <div>
                  <a class="log_sbt2 bg4448f8 mr20 login_btn" id="registe_submit" style="display:none" href="javascript:;">登录</a>
                </div>

                <div class="mt10 mb20 clearfix u-loginRelative tips_margin">
                  <span class="wordHui">还没有账号?</span>
                  <router-link to="/register" class="wordLan">立即注册</router-link>
                </div>
                <div class="login_tips">
                  <a href="https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes" target="_blank">
                    <span class="qqTipsStyle">
                      <svg-icon icon-class="QQkefu" class-name="QQkefu" />客服QQ
                    </span>
                  </a>
                  <div class="inlineBlock">
                    <div class="phone_tip tipIcon"></div>
                    <span>
                      <svg-icon icon-class="dianhua" class-name="dianhua" />客服电话： 400-618-0107
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
                    <el-tab-pane label="修改密码" name="setpass">
                 <div class="new-tab-item">
              <div class="place14 mt60">
                <div class="mt10 mb20 relative">
                  <input type="text" v-model="newparams.phone" placeholder="账号/已绑定手机号" class="txt ipt-txt plr10 h36 clearinput">
                  <svg-icon icon-class="user" class-name="user" />
                  <i class="inputrightico closeico" style="display: inline;">
                    <img src="../../assets/img/close.png" class="vmid" @click="empty">
                  </i>
                </div>
                <div id="upwd" style="display:inline">
                  <div class="mt10 mb20 relative tips_margin">
                    <input type="password" id="txtPwd" v-model="newparams.password" placeholder="请输入密码" class="txt ipt-txt plr10 h36">
                     <svg-icon icon-class="suo" class-name="suo" />
                    <i class="inputrightico showico">
                      <img src="../../assets/img/show.png" class="vmid">
                    </i>
                  </div>
                </div>
                <div id="smsCode" style="position:relative;display: flex;align-items: center">
                  <div class="mt10 mb20 relative">
                    <svg-icon icon-class="txtCode" class-name="suo" />
                    <input v-model="newparams.verification_code" placeholder="请输入您收到的验证码" type="text" id="txtCode" class="txt ipt-txt plr10 h36">
                    <i class="inputrightico closeico"><img src="/images/show.png" class="vmid"></i>
                  </div>
                  <div @click="getPhoneCode(2)" v-show="show">
                    <input id="J-btnGetCodes" class="getcodeBtn" name="codeinput" type="button" sdata="60" value="获取验证码">
                  </div>
                  <div v-show="!show" style="margin-left: 20px;">
                   {{count}} s
                  </div>
                </div>
                <div class="mt10 mb20 relative wordHui tips_margin" id="autoLoginc">
                  <input type="checkbox" id="chkSaveme" checked="" class="checkbox fl">
                  <label for="chkSaveme" class="fl">7天内免登录</label>
                  <input type="checkbox" id="rememberPassc" checked="" class="checkbox fl" style="margin:0 4px 0 15px">
                  <label for="chkSaveme" class="fl">记住密码</label>
                </div>
                <div>
                  <button class="log_sbt2 bg4448f8 mr20 login_btn" @click="xgPassword">修改密码</button>
                </div>
                <div>
                  <a class="log_sbt2 bg4448f8 mr20 login_btn" id="registe_submit" style="display:none" href="javascript:;">登录</a>
                </div>

                <div class="mt10 mb20 clearfix u-loginRelative tips_margin">
                  <span class="wordHui">还没有账号?</span>
                  <router-link to="/register" class="wordLan">立即注册</router-link>
                </div>
                <div class="login_tips">
                  <a href="https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes" target="_blank">
                    <span class="qqTipsStyle">
                      <svg-icon icon-class="QQkefu" class-name="QQkefu" />客服QQ
                    </span>
                  </a>
                  <div class="inlineBlock">
                    <div class="phone_tip tipIcon"></div>
                    <span>
                      <svg-icon icon-class="dianhua" class-name="dianhua" />客服电话： 400-618-0107
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>-->
        <!-- </div> -->
        <div class="wxLoginTips" id="wxLoginTips" style="display: none;"></div>
        <div class="wxLoginLeader" id="wxLoginLeader" style="display: none;"></div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapMutations, mapActions } from 'vuex'
import { login, phoneCode, resetPwd } from '@/api/user'
export default {
  name: 'Login',
  data () {
    return {
      activeName: 'second',
      show: true,
      count: '',
      timer: null,
      params: {
        phone: '',
        password: '',
        verification_key: '',
        verification_code: ''
      },
      newparams: {
        phone: '',
        password: '',
        verification_key: '',
        verification_code: ''
      },
      menuindex: 2
    }
  },
  created () {
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setToken: 'user/SET_TOKEN',
      setPhone: 'user/SET_PHONE',
      setHasNav: 'app/SET_PAGE_HAS_NAV',
      setUserInfo: 'user/SER_USERNAME'
    }),
    ...mapActions({
      setUserInfo: 'user/userInfo',
      fetchCartAmount: 'cart/fetchCarts'
    }),
    handleClick (tab, event) {
      console.log(tab, event)
    },
    empty () {
      this.params.phone = ''
    },
    async loginHandle (type) {
      if (type === 1) {
        // this.params.password = ''
        delete this.params.password
      } else if (type === 2) {
        (this.verification_key = ''), (this.verification_code = '')
      }
      const res = await login(this.params)
      console.log(res)
      if (res.meta) {
        console.log(res)
        this.setToken(res.meta.access_token)
        this.setPhone(res.data.phone)
        this.setUserInfo()
        this.fetchCartAmount()
        localStorage.setItem('__username__', res.data.company_name)
        console.log(localStorage.getItem('__username__'))
        this.$router.push('/my/me')
      } else if (res.errors) {
        this.$message.error(res.errors.phone)
      }
    },
    async getPhoneCode (type) {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }

      if (type === 1) {
        const resa = await phoneCode({ phone: this.params.phone })
        if (resa.key) {
          this.params.verification_key = resa.key
        }
      } else if (type === 2) {
        const resb = await phoneCode({ phone: this.newparams.phone })
        if (resb.key) {
          this.newparams.verification_key = resb.key
        }
      }
    },
    async xgPassword () {
      const res = await resetPwd(this.newparams)
      if (res.data) {
        this.$message.success('密码修改成功')
      } else if (res.message) this.$message.error(res.message)
      // console.log(res)
      // console.log('==========')
    }
  }
}
</script>

<style lang="scss">
.login {
  width: 100%;
  margin: 0 auto;
  z-index: 0;
  .relative {
    position: absolute;
    top: 275px;
  }
  .clearfix {
    zoom: 1;
  }
  .bd1 {
    width: 1200px;
    margin: 0 auto;
    .fl {
      float: left;
      display: inline;
      img {
        vertical-align: middle;
      }
    }
    /deep/.m-login {
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.12);
      margin: 29px 157px 0 0px !important;
      width: 342px;
      padding: 8px 25px 0 25px;
      background: white;
      // element样式修改
      .el-tabs__header {
        margin: 0 0 5px;
      }
      .el-tabs__active-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2.6px;
        background-color: #4448f8;
        z-index: 1;
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        list-style: none;
      }
      .new-tab-item {
        width: 100%;
        overflow: hidden !important;
        .svg-icon {
          font-family: layui-icon !important;
          font-size: 16px;
          font-style: normal;
        }
        .qrcode {
          border: 1px solid #e2e2e2;
          width: 216px;
          height: 225px;
          margin-left: 54px;
          margin-top: 14px;
          iframe {
            width: 216px !important;
            height: 222px !important;
          }
          .wordLan {
            color: #4448f8 !important;
            font-size: 13px;
          }
        }
        .codeTextStyle {
          margin-top: -21px;
          text-align: center;
        }
        .wordLan {
          color: #4448f8 !important;
          font-size: 13px;
        }
        .wordHui {
          color: #9b9999;
          font-size: 12.4px;
        }
        .toblue.wordHui:hover {
          color: #4448f8;
        }
        .checkbox {
          cursor: pointer;
          box-sizing: border-box;
          border: 1px solid #e6e6e6;
          width: 12px;
          height: 12px;
          vertical-align: middle;
          -webkit-appearance: none;
          appearance: none;
        }
        .mt60 {
          margin-top: 10px;
          .ipt-txt {
            width: 99.6% !important;
            height: 40px;
            padding-left: 39px;
            box-sizing: border-box;
            border: 1px solid #e6e6e6;
            resize: none;
            border-radius: 3px;
          }
        }
        .relative {
          position: relative;
        }
        .tips_margin {
          margin: 12px 0 14px 0 !important;
        }
        .mt10 {
          margin-top: 13px !important;
          margin-bottom: 14px !important;
          text-align: center;
          top: 5px;
          .svg-icon {
            position: absolute;
            top: 9.6px;
            left: 11px;
            color: #555;
            font-size: 18px !important;
          }
          .inputrightico {
            padding: 0 15px;
            height: 36px;
            position: absolute;
            right: 0;
            top: 1px;
            line-height: 36px;
            display: none;
            z-index: 2;
            cursor: pointer;
            .vmid {
              vertical-align: middle;
            }
            .showico {
              display: block;
            }
          }
          #chkSaveme {
            margin-right: 6px;
            vertical-align: -2px;
          }
        }
      }
      .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        position: relative;
      }

      .layui-tab {
        margin: 3px 0 !important;
        .layui-tab-title {
          position: relative;
          left: 0;
          height: 40px;
          white-space: nowrap;
          font-size: 0;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          transition: all 0.2s;
          -webkit-transition: all 0.2s;
          .layui-this {
            color: #000;
          }
        }
      }
      .layui-tab {
        margin: 10px 0;
        text-align: left !important;
      }
      .new-show-content {
        width: 96%;
        margin: 0 2%;
        overflow-x: hidden;
      }
    }

    .fr {
      float: right;
      display: inline;
    }
    .m-login {
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.12);
      margin: 29px 157px 0 0px !important;
      width: 342px;
      padding: 8px 25px 0 25px;
      background: white;
      .login_tips {
        width: 100%;
        height: 36px;
        padding: 13px 0 0px 0;
        border-top: 1px #cecbcb solid;
        font-size: 14px;
        color: #a1a1a1;
        .svg-icon {
          font-size: 20px;
        }
        .qqTipsStyle {
          cursor: pointer;
          color: #a1a1a1;
        }
        .qqTipsStyle:hover {
          color: #4448f8;
        }
        .inlineBlock {
          display: inline-block;
          position: relative;
          margin-left: 30px;
          margin-bottom: 19.2px;
        }
        span {
          font-size: 12.6px;
          margin-right: 12px;
        }
      }
    }
    .wxLoginTips {
      background: url("../../assets/img/wxlogin_tips.png") no-repeat center
        center;
      width: 295px;
      height: 31px;
      position: absolute;
      right: 207px;
      bottom: 12px;
    }
    .wxLoginLeader {
      background: url("../../assets/img/wxloginLead.png") no-repeat center
        center;
      width: 265px;
      height: 261px;
      height: 385px;
      position: absolute;
      right: 500px;
      bottom: 2px;
      -webkit-animation: wxtips 0.6s ease-in-out;
      animation: wxtips 0.6s ease-in-out;
    }
  }
}
.getcodeBtn {
  border: none;
  outline: none;
  background: white;
  cursor: pointer;
  height: 26px;
  // padding: 0 0 0 36px;
  display: inline-block;
  color: #4448f8;
  text-align: center;
  font-size: 14px;
  border-radius: 2px;
  font-family: "Microsoft Yahei";
  z-index: 999;
}
.bd1 {
  border: 0 !important;
}
.login_top:nth-child(2) {
  width: 100%;
  height: 138px;
  background: #fff;
}
.login_body {
  width: 1200px;
  margin: 0 auto;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    margin-left: 25px;
    font-size: 32px;
  }
  .kefu {
    float: right;
  }
  div {
    display: flex;
    align-items: center;
  }
  div:nth-child(2) {
    img {
      margin-left: 20px;
    }
  }
}
.login_body_new {
  width: 19%;
  height: 40%;
  padding: 1.3%;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 35%;
  right: 15%;
  border-radius: 10px;
}
.el-input--mini .el-input__inner {
  height: 40px !important;
}
.log_sbt2 {
  width: 100%;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  border: 1px solid #4448f8;
  text-align: center;
  font-size: 16px;
  margin-top: 5%;
  box-sizing: border-box;
  background: #4448f8;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
}
.login_body_top {
  display: flex;
  text-align: center;
  font-size: 16px;
  color: #666666;
  border-bottom: 1px solid #ababab;
  margin-bottom: 4%;
}
.login_body_top > div {
  flex: 1;
  padding-bottom: 3%;
  cursor: pointer;
}
.redb {
  border-bottom: 2px solid #ff0000;
  color: #ff0000;
}
.login_body_bottom {
  margin-top: 17%;
  text-align: center;
}
.login_tips_QQ{
  display: flex;
  margin-top: 10px;
  justify-content: center;
  color: #a1a1a1;
}
.el-icon-chat-line-square:before {
  font-size: 16px;
  line-height: 40px;
}
.el-icon-unlock:before {
  font-size: 16px;
  line-height: 40px;
}
.el-icon-phone-outline:before{
  font-size: 16px;
  line-height: 40px;
}
.yzmCode{
  line-height: 40px;
}

@media screen and(max-width: 1700px) {
  .el-input--mini .el-input__inner {
  height: 35px !important;

}
.el-icon-chat-line-square:before {
  font-size: 16px;
  line-height: 35px;
}
.el-icon-unlock:before {
  font-size: 16px;
  line-height: 35px;
}
.el-icon-phone-outline:before{
  font-size: 16px;
  line-height: 35px;
}

.login_body_top{
    font-size: 13px;
  }
  .yzmCode{
    line-height: 35px;
  }
}
@media screen and(max-width: 1500px) {
  .el-input--mini .el-input__inner {
  height: 30px !important;

}
  .login_body_new{
    font-size: 10px;
  }
  .el-icon-chat-line-square:before {
  font-size: 16px;
  line-height: 30px;
}
.el-icon-unlock:before {
  font-size: 16px;
  line-height: 30px;
}
.el-icon-phone-outline:before{
  font-size: 16px;
  line-height: 30px;
}

  .login_body_top{
    font-size: 11px;
  }
  .log_sbt2{
    height: 30px;
    line-height: 30px;
  }
    .yzmCode{
    line-height: 30px;
  }
}
@media screen and(max-width: 1400px) {
  .el-input--mini .el-input__inner {
  height: 25px !important;

}
.el-icon-chat-line-square:before {
  font-size: 16px;
  line-height: 25px;
}
.el-icon-unlock:before {
  font-size: 16px;
  line-height: 25px;
}
.el-icon-phone-outline:before{
  font-size: 16px;
  line-height: 25px;
}
  .login_body_new{
    font-size: 10px;
  }
  .login_body_top{
    font-size: 11px;
  }
  .log_sbt2{
    height: 30px;
    line-height: 30px;
  }
    .yzmCode{
    line-height: 25px;
  }
}

</style>
